<!-- template中有且仅又一个根标签 -->
<template>
    <div>
        <h1>用户列表管理</h1>
        <el-button @click="handlCreate">新增门面</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180" />
            <el-table-column prop="username" label="姓名" width="180" />
            <el-table-column prop="password" label="密码" />

            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="deleteRow(scope)"
                    >
                    Remove {{scope.row.role.name}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
		</div>

        <!-- 编辑弹出框 -->
		<el-dialog title="新增门面" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="店名">
					<el-input v-model="form.sname"></el-input>
				</el-form-item>
				<el-form-item label="店长">
					<el-input v-model="form.boss"></el-input>
				</el-form-item>
                <el-form-item label="区域">
					<el-select v-model="form.aid" class="m-2" placeholder="Select" size="large">
                        <el-option
                        v-for="item in areas"
                        :key="item.aid"
                        :label="item.aname"
                        :value="item.aid"
                        />
                    </el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="handlerSave">确 定</el-button>
				</span>
			</template>
		</el-dialog>
    </div>

</template>

<script lang="ts" setup>
import {ref,reactive} from "vue"; 
import { ElMessage, ElMessageBox } from 'element-plus';
import { qeuryArea ,addShop} from '../api/shop';

// 表格编辑时弹窗和保存
const editVisible = ref(false);
const areas = ref([{aid:0,aname:"华南"},{aid:1,aname:"华北"},]);

interface TableItem {
	id: any;
	sname: string;
	boss: string;
	aid: number;
}
// 表单元素
let form = reactive<TableItem>({
	id: null,
	sname: '',
	boss: '',
	aid:1
});

//查询数据
const query = reactive({
	name: '',
	pageIndex: 1, //第几页
	pageSize: 5  //每页的数量
});
//绑定的对象数据model数据
const tableData = ref([])
const pageTotal = ref(0)

const setup =()=>{
    qeuryArea().then(res=>{
        areas.value = res.data.data;
        
    })
}
setup();

//查询
const getData = ()=>{
    
}
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

getData()
const deleteRow = (scope: any) => {
    //scope.row 可以获取当前行的数据
    //scope.$index 是当前行的下标
    console.log(scope.row.date)
    tableData.value.splice(scope.$index, 1)
}

const handlerSave = () => {
	
    addShop(form).then(res=>{
        ElMessage.success("新增数据成功");
        editVisible.value = false;
    })
    //发送请求
	//ElMessage.success(`修改第 ${idx + 1} 行成功`);
	//tableData.value[idx].name = form.name;
    //	tableData.value[idx].address = form.address;
};
function handlCreate(){
    editVisible.value = true;
}
</script>